<script setup lang="ts">
import useHomeStore from "@/pinia/modules/homeStore/homeStore.ts";
import { storeToRefs } from "pinia";
import { ref, Ref } from "vue";
import type { NewItem } from "@/types/homeTypes/homeTypes.ts";
import RegionSkeleton from "@/views/home/components/regionSkeleton/regionSkeleton.vue";

const homeStore = useHomeStore();

const { newList }: { newList: Ref<NewItem[]> } = storeToRefs(homeStore);

/*调用函数获取新鲜好物*/
homeStore.fetchNewList();


const loading = ref(true);
</script>

<template>
   <panel title="新鲜好物" sub-title="新鲜出炉 品质靠谱">
      <template #right>
         <more path="/"></more>
      </template>
      <el-skeleton animated :count="4" :loading="!newList.length">
         <template #template>
            <region-skeleton bg="#f0f9f4"></region-skeleton>
         </template>
         <template #default>
            <ul class="goods-list">
               <li v-for="(item) in newList" :key="item.id">
                  <RouterLink :to="{name:'detail',params:{id:item.id}}">
                     <img v-lazy="item.picture" alt="">
                     <p class="name ellipsis">{{ item.name }}</p>
                     <p class="price">&yen;{{ item.price }}</p>
                  </RouterLink>
               </li>
            </ul>
         </template>
      </el-skeleton>
   </panel>
</template>

<style scoped lang="less">
.goods-list {
   display: flex;
   justify-content: space-between;
   height: 406px;

   li {
      width: 306px;
      height: 406px;
      background: #f0f9f4;
      .hoverShadow();

      img {
         width: 306px;
         height: 306px;
      }

      p {
         font-size: 22px;
         padding: 12px 30px 0 30px;
         text-align: center;
      }

      .price {
         color: @priceColor;
      }
   }
}

:deep(.el-skeleton) {
   display: flex;
   justify-content: space-between;
}
</style>
